<template>
  <div class="page">
    <NavHeader header="我的派单">
    </NavHeader>
    <div style="flex-shrink: 0;padding-top: 10px">
      <u-tabs active-color="#17BDB2" :list="allList" :is-scroll="false" :current="tabsIndex" @change="tabClick"></u-tabs>
    </div>
    <div class="content task-content">
      <u-empty v-if="!dataList.length" text="暂无数据" mode="list"></u-empty>
      <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
        <div class="card" v-for="item in dataList" :key="item.id" >
          <div class="card-top">
            <div class="card-left">
              <div class="card-title">
                <div class="section"></div>
                <div class="title">{{ item.name }}</div>
                <div class="price"> + {{ item.price }}元
                </div>
              </div>
              <div class="card-time" @click="copyValue(item.task_no)">
                <text class="card-time-label">
                  ID: {{ item.task_no }} 点击复制

                </text>
              </div>
              <div class="card-time">
                <text class="card-time-label">
                  {{ item.children.length}}人已接，剩余{{ item.count - item.children.length }}个</text>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="card-desc">
            <u-image height="26" width="26" src="/static/icon/time.png" style="margin-right: 18rpx"></u-image>
           {{ item.end_time }}
          </div>
          <div class="card-footer">
            <div class="card-time" style="display: flex;align-items: center;flex-grow: 1">
             <div>
             </div>
            </div>
            <div style="flex-shrink: 0;display: flex;align-items: center">
              <div class="primary-button" @click="pageDetail(item)">详情</div>
              <div style="width: 12px"></div>
              <div class="primary-button" @click="pageList(item)">任务</div>
              <div style="width: 12px"></div>
              <div class="primary-button" style="background-color: #dd524d" @click="deleteTask(item)">删除</div>
            </div>
          </div>
        </div>
        <u-loadmore v-if="dataList.length" :status="loading" />
        <div style="height: 40rpx"></div>
      </scroll-view>
    </div>

    <Tabbar :current="0" :count="totalCount" path="/pages/task/dispatch"/>
  </div>
</template>
<script>
import NavHeader from "../../components/NavHeader.vue";
import Tabbar from "../../components/Tabbar.vue";
import Mixin from "../../common/mixin";
import { mapGetters } from 'vuex';
export default {
  name: "index",
  components: {Tabbar, NavHeader},
  mixins: [Mixin],
  data() {
    return {
      searchParams: {
        keyword: ''
      },
      tabsIndex: 0,
      allList: [
        {tabId: 2,name: '进行中', status: 'doing'},
        {tabId: 2,name: '已完成', status: 'done'},
      ],
      status: 'doing'
    }
  },
  onShow() {
    this.handleSearch()
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  // 在拉刷新
  onPullDownRefresh() {
    this.pageNum = 1
    this.getList()
  },
  methods: {
    tabClick(index){
      this.tabsIndex = index
      this.status = this.allList[index].status
      this.getList()
    },
    getList() {
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 0
      })
      this.$api.getTaskPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams,
        status: this.status
      }).then(res => {
        this.totalCount = res.count
        let list = []
        res.rows.forEach(item => {
          list.push({
            ...item
          })
        })
        if (this.pageNum === 1) {
          this.dataList = [
          ]
        }
        this.dataList = [
          ...this.dataList,
          ...list
        ]
        if (this.pageNum >= this.totalPage) {
          this.loading = 'nomore'
        } else {
          this.loading = 'loadmore'
        }
      }).finally(() => {
        uni.hideLoading()
        // 结束刷新
        uni.stopPullDownRefresh()
      })
    },
    toPage(url) {
      uni.navigateTo({
        url
      })
    },
    pageDetail(item) {
      uni.navigateTo({
        url: `/pages/task/detail?id=${item.id}&disabled=1`
      })
    },
    pageList(item) {
      uni.navigateTo({
        url: `/pages/task/dispatchList?id=${item.id}`
      })
    },
    deleteTask(item) {
      let that = this
      if (item.children.length) {
        // 提示已接单
        uni.showModal({
          title: '提示',
          content: '已有人接单，是否删除？',
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '删除中',
                mask: true,
                duration: 0
              })
              that.$api.deleteTask(item.id).then(() => {
                that.pageNum = 1
                that.getList()
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
              }).catch(() => {
                uni.showToast({
                  title: '删除失败',
                  icon: 'none'
                })
              })
            }
          }
        })
      } else {
        // 提示已接单
        uni.showModal({
          title: '提示',
          content: '是否删除？',
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '删除中',
                mask: true,
                duration: 0
              })
              that.$api.deleteTask(item.id).then(() => {
                that.pageNum = 1
                that.getList()
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
              }).catch(() => {
                uni.showToast({
                  title: '删除失败',
                  icon: 'none'
                })
              })
            }
          }
        })
      }
    },
    copyValue(value) {
      uni.setClipboardData({
        data: value,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },
  }

}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.search-box {
  flex-shrink: 0;
  width: 690rpx;
  height: 80rpx;
  background: rgba(255,255,255,0.4);
  border-radius: 16rpx;
  border: 2rpx solid #FFFFFF;
  margin: 20rpx auto;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}
.card {
  width: 690rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  opacity: 0.8;
  margin: 20rpx auto;
  padding: 24rpx 24rpx;
  .card-footer {
    margin-top: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
  }
  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .card-left {
      width: 100%;
      .card-title {
        width: 100%;
        display: flex;
        align-items: center;
        .price {
          flex-grow: 1;
          text-align: right;
          font-size: 32rpx;
          color: #dd524d;
          font-weight: bold;
        }
        .section {
          flex-shrink: 0;
          width: 6rpx;
          height: 29rpx;
          background: #17BDB2;
          border-radius: 1px;
        }
        .title {
          flex-shrink: 0;
          padding: 0 12rpx;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 34rpx;
          color: #1A1A1A;
        }

      }
    }
  }
  .card-desc,
  .card-time {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    padding: 16rpx 18rpx;
    padding-bottom: 0;
    color: #666666;
  }
  .line {
    border-bottom: 1px solid #E6E6E6;
    padding: 12rpx 0;
  }
  .card-desc {
    // 三行溢出省略号
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
  }
}
.menu-list {
  display: flex;
  align-items: center;
  padding:0 20rpx;
  .menu-item {
    margin: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .menu-name {
      font-size: 28rpx;
      padding: 12rpx 0;
      text-align: center;
      color: #333333;
    }
  }
}
</style>
